<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrapper {
            display: grid;
            /*grid-template-columns: 33% 33% 33%;*/
            /*grid-template-rows: 200px 200px;*/
      /*      grid-template-columns: 100px 50px 100px;
            grid-template-rows: 50px 50px;*/

            grid-template-columns: 50% 50%;
            /*grid-template-rows: 100px 100px;*/

        }
        .wrapper div{
            height: 100px;
        }
        .wrapper div:nth-child(1){
            background: blue;
        }
        .wrapper div:nth-child(2){
            background: #ff3a36;
        }
        .wrapper div:nth-child(3){
            background: green;
        }
        .wrapper div:nth-child(4){
            background: violet;
        }
        .wrapper div:nth-child(5){
            background: darkolivegreen;
        }
        .wrapper div:nth-child(6){
            background: orange;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
</body>
</html>